<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贴吧分类管理</title>
		<link rel="stylesheet" type="text/css" href="../css/iview.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/iview.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/index.js"></script>
		<script src="../js/axios.js"></script>

	</head>
	<body>


		<div id="app" align="center">
			<div>
				<el-button type="primary" round @click="dialogFormVisible=true">新增
				</el-button>
				<!--条件查询的条件输入框-->
				<font size="4">类型名称:</font>
				<el-input v-model="typeName" placeholder="请输入内容" style="width: 150px; line-height: 50px;"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="querytypename()" round>搜索</el-button>

			</div>

			<div style="width: 100%;">
				<template>
					<!--element表格-->
					<el-table :data="typelist" style=" width: auto">
						<el-table-column type="index" label="序号" :show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column prop="typeName" label="帖子类型名称" :show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column prop="typeDescribe" label="帖子类型描述" :show-overflow-tooltip="true">
						</el-table-column>

						<el-table-column prop="operation" label="操作" align="center" min-width="80">
							<template slot-scope="scope">
								<el-button type="danger" icon="el-icon-delete" circle @click="deletetype(scope.row)" size="mini"></el-button>
								<el-button type="warning" icon="el-icon-edit" circle @click="updatetype(scope.row)" size="mini"></el-button>
							</template>
						</el-table-column>


					</el-table>
				</template>
			</div>

			<el-dialog title="新增类型" :visible.sync="dialogFormVisible">
				<el-form>
					<el-form-item label="类型名称">
						<el-input v-model="insertTypeName" placeholder="请输入内容" style="width: 150px;"></el-input>
					</el-form-item>
					<el-form-item label="类型描述">
						<el-input v-model="insertTypeDescribe" placeholder="请输入内容" style="width: 200px;"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="insert()">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改类型" :visible.sync="dialogFormVisible2">
				<el-form>
					<el-form-item label="类型名称">
						<el-input v-model="updateTypeName" placeholder="na" style="width: 150px;"></el-input>

					</el-form-item>
					<el-form-item label="类型描述">
						<el-input v-model="updateTypeDescribe" placeholder="de" style="width: 200px;"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="update()">确 定</el-button>
				</div>
			</el-dialog>
			
		</div>
	</body>

	<script>

		var Main = new Vue({
		el: '#app',
		/*初始化方法放在这里面(相当于页面加载事件)*/
		mounted: function () {
			this.querytype();
		},
		data() {
			return {
				isStick: "",
				isSelect: "",
				typeDescribe:"",
				typeName:"",
				typeId: "",
				dialogFormVisible: false,
				dialogFormVisible2: false,
				total: 50,//默认数据
				pagesize: 10,//每页的数据条数
				currentPage: 1,//默认开始页面
				insertTypeName: '',
				insertTypeDescribe: '',
				updateTypeName: this.typeName,
				updateTypeDescribe: this.typeDescribe,			
				typelist: [],
			};
		},
		/*方法函数写在这里面*/
		methods: {
			querytype() {
				axios({
					method: 'post',
					url: '/api/bbs/type/getAllType',
					headers: {
						//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
					},
				}).then(res => {
					res = res.data;
					this.typelist = res;
					console.log('typelist==>'+this.typelist);
				})
			},
			querytypename() {
				let params = new URLSearchParams();
				params.append("typeName", this.typeName);
				axios({
					method: 'post',
					url: '/api/bbs/type/queryByTypeName',
					data: params,
					headers: {
						//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
					},
				}).then(res => {
					res = res.data;
					this.typelist = res;
					console.log('typelist==>'+this.typelist);
				})
			},
			insert(val){
				let params = new URLSearchParams();
				params.append("typeName", this.insertTypeName);
				params.append("typeDescribe", this.insertTypeDescribe);
				axios({
					method: 'post',
					url: '/api/bbs/type/addOneType',
					data: params,
					headers: {
						//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
					},
				}).then(res => {
					res=res.data;
					if (res.success) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.dialogFormVisible=false;
						this.querytype();						
					} else {
						this.$message.error(res.message);
					}
				})
			},
			deletetype(row){
				this.$confirm('是否删除类型?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = new URLSearchParams();
					params.append("typeId",row.typeId);
					axios({
						method: 'post',
						url: '/api/bbs/type/delType',
						data: params,
						headers: {
							//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
						},
					}).then(res => {
						res=res.data;
						if (res.success) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.dialogVisible=false;
							this.querytype();
						} else {
							this.$message.error(res.message);
						}
					})										
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			updatetype(row){
				this.dialogFormVisible2=true;
				this.typeId=row.typeId;
				this.updateTypeName=row.typeName;
				this.updateTypeDescribe=row.typeDescribe;
			},
			update(){
				let params = new URLSearchParams();
				params.append("typeId",this.typeId);
				params.append("typeName", this.updateTypeName);
				params.append("typeDescribe", this.updateTypeDescribe);
				axios({
					method: 'post',
					url: '/api/bbs/type/upType',
					data: params,
					headers: {
						//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
					},
				}).then(res => {
					res=res.data;
					if (res.success) {
						 this.$message({
							message: res.message,
							type: 'success'
						});
						this.dialogFormVisible2=false;
						this.querytype();
					} else {
						this.$message.error(res.message);
					}
				})
			},
			/*对话框关闭与否触发的方法*/
			handleClose(done) {
				this.$confirm('确认关闭？').then(_ => {
					done();
				}).catch(_ => {
					
				});
			},
			handleSizeChange(val) {
				this.pagesize = val;console.log(this.pagesize)  
				//每页下拉显示数据
			},
			handleCurrentChange() {
				this.currentPage = currentPage;
				console.log(this.currentPage)  
				//点击第几页
			},
			created: function () {
				this.total = this.tableData.length;
			},
			current_change: function (currentPage) {
				this.currentPage = currentPage;
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		},
	});

	</script>

	<style type="text/css">
		.el-aside {
			background-color: #D3DCE6;
			color: #333;
			text-align: center;
			line-height: 200px;
		}

		.el-main {
			background-color: #E9EEF3;
			color: #333;
			text-align: center;
			line-height: 160px;
		}
	</style>
	</body>
</html>
